<template>
  <div>
    <div class="gb-header flex-box" :class="{active: boxScroll>25}">
      <div class="top-icon">
        <img src="@/assets/img/gb-logo.png" alt="" />
      </div>
      <div class="top-search">
        <button>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gb-sousuo"></use>
          </svg>
        </button>
        <input type="text" @click="$router.push('/searchbox')" />
      </div>
      <div class="navItems flex-box" @click="navShow">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gb-icon-"></use>
        </svg>
      </div>
    </div>
    <!-- <div class="gb-navbreak">
      <ul>
        <li class="active"><router-link to="/">首页</router-link></li>
        <li><router-link to="/mallPuShuo">谱说</router-link></li>
        <li>腔调</li>
        <li><a href="#">积分</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">粉丝</a></li>
        <li><a href="#">合作</a></li>
        <li><a href="#">报告</a></li>
        <li><a href="#">预约</a></li>
        <li><a href="#">订单</a></li>
        <li><a href="#">客服</a></li>
        <li><a href="#">官方淘宝</a></li>
      </ul>
    </div> -->
  </div>
</template>

<script>
// import '@/assets/css/gb-index.scss'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      mallNavShow: false,
      boxScroll: 0,
      navLists: []
    }
  },
  components: {},
  methods: {
    navShow() {
      this.mallNavShow = !this.mallNavShow
    }
  },
  created() {
    this.$bus.$on('scrollHOme', data => {
      // console.log(data)
      this.boxScroll = data
    })
  },
  mounted() {}
}
</script>
<style scoped lang="scss">
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(-20%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-20%, 0, 0);
}
.main-container {
  width: 100%;
  height: 100%;
}
.gb-header {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: #f4f8fa;
  padding: 0 10px;
  height: 64px;
  box-sizing: border-box;
  z-index: 999;
  justify-content: space-between;
  transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  &.active {
    height: 38px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 4px 6px rgba($color: #000000, $alpha: 0.1);
    .top-search {
      width: 310px;
      border: 1px solid #ddd;
      button {
        color: #1c93d0;
      }
    }
    .top-icon {
      width: 0;
    }
  }
  & > div {
    float: left;
  }
  .top-icon {
    width: 115px;
    margin-right: 0;
    overflow: hidden;
    transition: width 0.25s ease;
    -webkit-transition: width 0.25s ease;
    img {
      width: 115px;
    }
  }
  .top-search {
    width: 180px;
    height: 25px;
    border-radius: 50px;
    border: 1px solid #1c93d0;
    position: relative;
    transition: width 0.25s ease;
    -webkit-transition: width 0.25s ease;
    button {
      width: 40px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: none;
      background: none;
      color: #999;
      font-size: 16px;
      line-height: 25px;
    }
    input {
      width: 100%;
      height: 100%;
      border: none;
      background: none;
      box-sizing: border-box;
      padding: 0 6px 0 36px;
    }
  }
  .top-person {
    .icon {
      font-size: 24px;
      color: #333;
    }
  }
}
.gb-navbreak {
  width: 100%;
  background: #f4f8fa;
  overflow-x: scroll;
  padding-left: 0;
  padding-right: 7px;
  box-sizing: border-box;
  ul {
    overflow: hidden;
    width: 720px;
    li {
      float: left;
      color: #999;
      font-size: 16px;
      margin-left: 12px;
      margin-right: 12px;
      padding: 4px 0 8px 0;
      a {
        color: #999;
      }
      &.active {
        color: #1c93d0;
        border-bottom: 2px solid #1c93d0;
        a {
          color: #1c93d0;
        }
      }
    }
  }
}
.navItems {
  width: 28px;
  height: 28px;
  font-size: 32px;
}
</style>
